<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Beehive</title>
    <!-- webkit内核，默认用急速核-->
    <meta name="renderer" content="webkit">
    <!-- IE使用最高模式渲染，强制IE使用chrome frame渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/beeui.css}">


    <style>
        /*设置layui单元格*/
        tbody .layui-table-cell {
            height: 100px;
            line-height: 100px;
            font-family: "Apple Color Emoji", serif;
        }

        /*表格头*/
        .layui-table th {
            font-weight: bold;
            font-family: "monospace", 宋体;
        }

        body {
            margin: 0 10px;
        }

        /* 下拉框 */
        .layui-anim-upbit {
            width: 190px;
        }

    </style>
</head>
<body>

<!-- 面包屑导航 -->
<span class="layui-breadcrumb">
    <blockquote class="layui-elem-quote">
        <a th:href="@{/admin}" target="_parent">首页</a>
        <a href="#" target="_self">图书管理</a>
        <a><cite>图书列表</cite></a>
    </blockquote>
</span>

<div style="position: absolute; top: 7px; right: 10px;">
    <a class="layui-btn layui-btn-small" onclick="refreshPage()" title="刷新"
       style="background-color: #f2f2f2; color: green">
        <i class="layui-icon layui-icon-refresh"></i>
    </a>
</div>

<!-- 条件查询 -->
<form class="layui-form">
    <div class="row" style="margin-right: 0; margin-top: 10px;">
        <div class="col">
            <input id="title" type="text" class="layui-input" placeholder="书的标题">
        </div>
        <div class="col">
            <select id="categoryId" class="form-control">
                <option value="">请选择分类</option>
                <option th:each="type : ${types}"
                        th:value="${type.id}"
                        th:text="${type.title} + ' ' + ${type.type}"></option>
            </select>
        </div>
        <div class="col">
            <select id="themeId" class="form-control">
                <option value="">请选择主题</option>
                <option th:each="theme : ${themes}"
                        th:value="${theme.id}"
                        th:text="${theme.name}"></option>
            </select>
        </div>
        <div class="col">
            <select id="status" class="form-control">
                <option value="">请选择状态</option>
                <option value="1">已推荐</option>
                <option value="0">未推荐</option>
            </select>
        </div>
        <div class="col-4">
            <div id="searchBtn" class="btn btn-success">查询</div>
            <button type="reset" class="btn btn-secondary">重置</button>
            <a th:href="@{/admin/uploadSingle}" class="btn btn-primary">添加一条新记录!</a>
            <button type="button" class="layui-btn" id="uploadExcel" style="float:right; margin-right: -15px;" >
                <i class="layui-icon">&#xe67c;</i>导入书单
            </button>

        </div>
    </div>
</form>

<!-- layui数据表格 -->
<table class="layui-hide" id="bookList" lay-filter="bookTable"></table>

<!-- toolbar -->
<script type="text/html" id="bookListBar">
    <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</a>
</script>


<script th:inline="javascript">
    // 获取管理员信息，用于记录推荐图书的管理员ID
    let admin = [[${session.loginUser}]];
</script>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/booklist.js}" charset="utf-8"></script>

<script>
    // 单击刷新按钮表格重载
    function refreshPage() {
        // 表格重载
        outerTable.reload('bookList', {
            url: '/book/all' //数据接口
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'limit' //每页数据量的参数名，默认：limit
            }
            , page: {
                limit: 4,
                limits: [2,4,6]
            }
        })
    }
</script>

</body>
</html>